<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="660px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <div class="modalCard">
      <div class="titlefangkuai">      <div class="fangkuai"></div>
            <div class="Header">已确认人员基本信息</div></div>
    <el-descriptions
      class="descriptions"
      label-width="120px"
      :column="2"
      size="medium"
      labelClassName="label"
      contentClassName="content"
    >
      <el-descriptions-item label="案件名称">{{
        this.formData.caseName
      }}</el-descriptions-item>
       <el-descriptions-item label="申请人姓名">{{
          formData.tinvolvedPersonVO.applicationName
        }}</el-descriptions-item>
        <el-descriptions-item label="申请人身份证号">
          {{ formData.tinvolvedPersonVO.applicationZjh }}
        </el-descriptions-item>

        <el-descriptions-item label="申请人联系电话">
          {{ formData.tinvolvedPersonVO.applicationTel }}
        </el-descriptions-item>
        <el-descriptions-item label="与涉案人关系">
          <dict-tag
            :options="dict.type.relation_type"
            :value="formData.tinvolvedPersonVO.applicationRelation"
          ></dict-tag>
        </el-descriptions-item>
      <el-descriptions-item label="涉案人员姓名">{{
        this.formData.tinvolvedPersonVO.name
      }}</el-descriptions-item>
      <el-descriptions-item label="涉案人身份证号">{{
        this.formData.tinvolvedPersonVO.zjh
      }}</el-descriptions-item>
      <el-descriptions-item label="涉案人联系方式">{{
        this.formData.tinvolvedPersonVO.tel
      }}</el-descriptions-item>
    </el-descriptions>
    </div> 
    <el-descriptions  class="descriptions"
      label-width="120px"
      :column="1"
      size="medium"
      labelClassName="label"
      contentClassName="content">
      <el-descriptions-item label="涉案人户籍地址">{{
        this.formData.tinvolvedPersonVO.residenceAddress
      }}</el-descriptions-item>
      <el-descriptions-item label="涉案人居住地址">{{
        this.formData.tinvolvedPersonVO.wholeLiveAddress
      }}</el-descriptions-item>
    </el-descriptions>   <el-divider></el-divider>
    <div class="modalCard">
      <div class="titlefangkuai">      <div class="fangkuai"></div>
            <div class="Header">已确认人员收款信息</div></div>
    <el-descriptions
      class="descriptions"
      label-width="120px"
      :column="2"
      size="medium"
      labelClassName="label"
      contentClassName="content"
    >
      <el-descriptions-item label="判决损失金额(元)">{{
        this.formData.tcasePerson.personJudgmentLossAmount
      }}</el-descriptions-item>
      <el-descriptions-item label="认定发放金额(元)">{{
        this.formData.tcasePerson.personConfirmedPaymentAmount
      }}</el-descriptions-item>
      <el-descriptions-item label="收款方式">{{
        this.formData.tcasePerson.collectionWayName
      }}</el-descriptions-item>
      <el-descriptions-item label="收款账号">{{
        this.formData.tcasePerson.collectionNumber
      }}</el-descriptions-item>
    </el-descriptions>
    </div>

    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton"> 关闭 </el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { MODALTYPE, MODALIMG, CASEDEFAULTSTATE } from "../../../utils/variable";
import { onlyNumber } from "../../../utils/commonMethods";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getDetail } from "@/api/peopleConfirm/peopleConfirm";
import {
  getCase,
  addCase,
  getTree,
  validNumber,
  updateCase,
} from "@/api/caseManage/case";
export default {
  dicts: ["relation_type"],
  inheritAttrs: false,
  components: { Treeselect },
  props: {
    detailId: {
      type: Number,
      require: true,
    },
  },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: [],
      // 是否显示弹出层
      open: false,
      formData: {
        tinvolvedPersonVO: {},
        tcasePerson: {},
      },
    };
  },
  computed: {},
  watch: {
    detailId: {
      handler(value) {
        if (value) {
          this.reset();
          if (value) {
            getDetail(value).then((response) => {
              this.formData = response.data;
              this.open = true;
              this.title = "已确认信息详情";
            });
          }
          console.log(value);
        }
      },
      immediate: true,
    },
  },
  created() {
    // this.initTreeOptions();
  },
  mounted() {},
  methods: {
    onlyNumber,
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id, //自定义id
        label: node.label, //自定义label
        //处理children，当children为[]或null时，子节点会展示No sub-options，一般子节点不需要展示这个，所以将children置为0
        children: node.children && node.children.length > 0 ? node.children : 0,
      };
    },
    // 取消按钮
    cancel() {
      this.$emit("update:detailId", 0);
      this.open = false;
      this.reset();
    },
    initTreeOptions() {
      getTree().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 表单重置
    reset() {
      this.formData = { tinvolvedPersonVO: {}, tcasePerson: {} };
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/dialog.scss"; //模态框样式

::v-deep .label {
  width: 120px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #5e5f61;
  display: inline-block;
  text-align: right;
}
::v-deep .content {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #aeafb0;
}
::v-deep .el-descriptions-item__container {
  margin-bottom: 15px;
}
.dialogClass{
 ::v-deep .el-dialog{
  top: 80px;
  }
}
</style>
